<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../js/dropdown/dropdown.css">
				
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		<link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		<!-- SELECT2 -->
		<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		
		
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">
				<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
				<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content" style="width:1000px">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">维护款式</h4>
							</div>
							<div class="modal-body">
								<div class="form-group" style="margin-bottom:10px">
									<label class="control-label col-md-2" style="line-height:34px;"><span class="required">*</span>款式名称：</label>
									<div class="col-md-4">
										<input type="text" class="form-control" name="groupName" placeholder="请输入款式名称" maxlength="20" />
										<input type="hidden" name="id" />

									</div>
								</div>
								<div class="form-group houtai" style="margin-bottom:10px">
									<label class="control-label col-md-2">成衣价格：</label>
									<div class="col-md-3">
									<input type="text" class="form-control" name="skuprice"  onkeypress="return $.IsDecimal(event);" onblur="return $.IsMoney(this);"  placeholder="请输入单价" maxlength="20"/>
								    </div>
								</div>
									<div class="form-group houtai" style="margin-bottom:10px">
									<label class="control-label col-md-2">包装袋：</label>
									<div class="col-md-3">
									<select  id="baozhuang_select"  class="col-md-12 select2-offscreen" tabindex="-1">
									</select>
								    </div>
								</div>
								<div class="form-group houtai" style="margin-bottom:10px">
									<label class="control-label col-md-2">封口贴：</label>
									<div class="col-md-3">
									<select  id="fengkou_select"  class="col-md-12 select2-offscreen" tabindex="-1">
									</select>
								    </div>
								</div>
								<div class="form-group divtiezhi houtai" style="margin-bottom:10px;height:60px">
									<label class="control-label col-md-2">贴纸：</label>
									<div class="col-md-10" style="display:inline-flex">
									<table class="table table-bordered tiezhi">
									</table>
									
								    </div>
								</div>
								<div class="form-group houtai" style="margin-bottom:10px">
									<label class="control-label col-md-2">总成本价：</label>
									<div class="col-md-3">
									<lable name="costPrice">0</lable>
								    </div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="button" class="btn btn-success bt-save">保存</button>
							</div>
						</div>
					</div>
				</div>
				<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
				<!-- pintuan-->
				<div class="modal fade" id="pintuan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content" style="width:800px">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">拼团设置</h4>
							</div>
							<div class="modal-body">
								 <div class="form-group" style="margin-bottom:10px">
									<label class="control-label col-md-2" style="line-height:34px;"><span class="required">*</span>拼团价格：</label>
									<div class="col-md-3">
										<input type="text" class="form-control" name="promotionPrice" placeholder="请输入拼团价格,0代表不拼团" maxlength="20" onkeypress="return $.IsDecimal(event);" onblur="return $.IsMoney(this);" />
										<input type="hidden" name="id" />

									</div>
								</div> 
								<div class="form-group " style="margin-bottom:10px">
									<label class="control-label col-md-2" style="line-height:34px;"><span class="required">*</span>拼团件数：</label>
									<div class="col-md-3">
									<input type="text" class="form-control" name="groupAmount"  onkeypress="return $.IsNum(event);" onblur="return $.IsNaN(this);"  placeholder="请输入拼团件数" maxlength="20"/>
								    </div>
								</div>				
								<div class="form-group " style="margin-bottom:10px">
									<label class="control-label col-md-2" style="line-height:34px;"><span class="required">*</span>拼团返利：</label>
									<div class="col-md-3">
										<select id="shareRate_select" name="shareRate">
											<option></option>
									    	<option value="0.03">3%</option>
									    	<option value="0.05">5%</option>
									    	<option value="0.1">10%</option>
									  	</select>
										<span class="error-span"></span>
								    </div>
								</div>								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="button" class="btn btn-success bt-save">保存</button>
							</div>
						</div>
					</div>
				</div>
				<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row" style="height: 30px;">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="../index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>商品款式</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- FORMS QUERY-->
							<div class="row">
								<div class="col-md-12">
									<div class="row">
										<div class="col-md-12">
											<div class="box border primary">
												<div class="box-title">
													<h4><i class="fa fa-bars"></i>查询条件</h4>
												</div>
												<div class="box-body big" style="padding:10px;">
													<form class="form-horizontal" role="form">
														<div class="form-group mrg-bt10">
															<label class="col-sm-1 control-label" style="width: auto">款式名称：</label>
															<div class="col-sm-2">
																<input type="text" class="form-control" name="q" placeholder="输入关键字">
															</div>
															<div class="col-sm-2 tuan" style="width: 120px">
														    <input type="checkbox"  name="isGroup"><span style='margin-left:10px'>是否拼团</span>
														   </div>
															<div class="col-sm-1">
																<a class="btn btn-primary search">查询</a>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /FORMS QUERY -->
							<div class="row" style="height: 30px;">
								<div class="col-md-12">
									<div class="box ">
										<a class="btn btn-success config create">
											<i class="fa  fa-plus-square-o"></i> 新增款式
										</a>
									</div>
								</div>
							</div>

							<div class="row">
								<!-- TABLES -->
								<div class="col-md-12">
									<!-- BOX -->
									<div class="box border primary">
										<div class="box-title">
											<h4><i class="fa fa-table"></i>款式数：<span id="total"></span>条 </h4>

										</div>
										<div class="box-body">
											<table id="db_group_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
												
											</table>
										</div>
									</div>
									<!-- /BOX -->
								</div>
							</div>
							<!-- /TABLES -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
			<input type="hidden" name="groupId" />
		</section>

		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<!-- JQUERY UI-->
		<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
	
		<!-- INPUT MASK -->
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
		<!-- UNIFORM -->
		<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>

		
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- DATA TABLES -->
			<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
				<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
		<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>
		<script src="../../js/common.js"></script>
		<script>

		var Group=function(){			
			var $mainDataTable=null;
			var type=null;
			var saveGroup=function(){
			    if ($("input[name=groupName]").val() == "") {
						$("#box-config").find(".form-group").addClass("has-error");
						return;
					} else {
						 $.blockUI();
						var group = {};
						if(type=="Houtai"){
		        		 var material={};
	        			 material.baozhuang={id:$("#baozhuang_select option:selected").val(),price:$("#baozhuang_select option:selected").val()};
	        			 material.fengkou={id:$("#fengkou_select option:selected").val(),price:$("#fengkou_select option:selected").val()};
	        			 material.tiezhi=[];
	        			 material.skuCost=$("[name=skuprice]").val();
	        			 var totalTiezhi=0;
	        			 //循环贴纸
	        			 $(".tiezhitd").each(function(){
	        				 var t={};
	        				 var p=$(this)[0].innerText.replace('*','')
	        				var a=$(this).find("input").val();
	        				if(a!=""){
	        				 t.id=$(this).find("input").attr("id");
	        				 t.price=parseFloat(a)*parseInt(p);
	        				 t.amount=a;
	        				 totalTiezhi+=parseInt(a);
	        				 material.tiezhi.push(t);
	        				}       		
		        		  });
	        			 
	        			 group.extMaterial=JSON.stringify(material);
	        			 group.costPrice=$("[name=costPrice]").html();
						}
						group.id = $("input[name=id]").val();
						group.groupName = $("input[name=groupName]").val();
						group.groupType=type;
						 if (totalTiezhi==0) {
								$.alert("请输入贴纸数量");
								 $.unblockUI();
								return false;
						 }
						$.ajax({
							type: "post",
							url: App.getContextPath()+"admin/group/saveGroup.do",
							async: true,
							data: {strGroup:JSON.stringify(group)},
							success: function(result) {
								 $.unblockUI();
								if(result.type=="error"){
									$.alert(result.extra);
								}else{
							  $("#box-config").modal("hide");
								searchGroup();
							}
							}
						});
					}
			};				
				
		var delGroup=function() {
					var tr = $(this).closest("tr");
					if ($(tr).find("td:eq(2)").html() != "0") {
						$.alert("款式下已经绑定商品，请先解除关系后，再删除！");
						return;
					} else {
							$.confirm("确认删除此款式?",function(){
								$.ajax({
										type: "post",
										url: App.getContextPath()+"admin/group/updateGroupStatus.do",
										async: true,
										data: {
											id: $(tr).find("td:eq(0)").html()
										},
										success: function(result) {
											searchGroup();
										}
									});
								});
					}
				};
			
       var searchGroup = function() {
    	var groupType=type;
          var url=App.getContextPath()+"admin/group/searchGroup.do?q="+$("input[name=q]").val()+"&groupType="+type;
		  url+="&isGroup="+$("[name=isGroup]").prop("checked");
		var dtSetting = $.dataTableSetting({					
					"ajaxSource" :url,
					"serverSide" : true,
					"bFilter" : false,// 去掉搜索框
					"bLengthChange" : false,// 每页显示数量	
						
					"sScrollX":"100%",
					"sScrollXInner": "100%",
					"iDisplayLength": 10,
					
					"bSort" : false,					
					"aoColumns" : [ {
						"mDataProp" : "id",
						"sTitle" : "款式ID",
						"width" : "10%"				
					}, {
						"mDataProp" : "groupName",
						"sTitle" : "款式名称",
						"width" : "20%"		
					}, {
						"mDataProp" : "productNum",
						"sTitle" : "商品数",
						"width" : "10%"		
					}, {
						"mDataProp" : "promotionPrice",
						"sTitle" : "拼团价",
						"width" : "10%",
						"class":groupType=="Houtai"?"hide":""
					}, {
						"mDataProp" : "groupAmount",
						"sTitle" : "拼团件数",
						"width" : "10%",
						"class":groupType=="Houtai"?"hide":""
					}, {
						"mDataProp" : "costPrice",
						"sTitle" : "总成本价",
						"width" : "8%",
						"class":groupType=="Web"?"hide":""
					}, {
						"mDataProp" : "createTime",
						"sTitle" : "创建时间",
						"width" : "12%",	
						"render":function(data, type, row){
						    return $.getLocalTime(row.createTime);
						}
					}, {						
						"sTitle" : "操作",
						
						"render":function(data, type, row) {
					     var str="<p class='btn-toolbar' style='margin:0px'>"+
					     "<button class='btn btn-success btn-xs bt_edit btn-width'><i class='fa fa-pencil-square-o' style='margin-right:2px;'></i>编辑</button>"+
						 "<button class='btn btn-danger btn-xs bt_del btn-width'><i class='fa fa-trash-o'></i> 删除</button> ";
						
						 if(groupType=="Web"){					 
							// str+= "<a  class='btn btn-primary btn-xs bt_add btn-width' style='margin-left:0px;margin-right:5px;margin-top:2px;width:80px;' href='add_product_recommend.html?groupId="+row.id+"'><i class='fa fa-copy'></i>推荐商品</a>";
							 str+= "<a  class='btn btn-warning btn-xs bt_addTuan btn-width' style='margin-left:0px;margin-right:5px;margin-top:2px;width:80px;' href='javascript:;' id="+row.id+" promotionPrice="+row.promotionPrice+" groupAmount="+row.groupAmount+" shareRate="+row.shareRate+"><i class='fa fa-plus-square-o'></i>拼团设置</a></p>";
						 }
							 return str;
						}
					}, {
						"mDataProp" : "extMaterial",
						"class":"extMaterial hide"
					}]
				});
			
		 $mainDataTable = $("#db_group_list").dataTable(dtSetting);
	 }
       
       var fengkou="",tiezhi="",baozhuang="",num=1;
       var getMaterial=function(){  
    	    fengkou="",tiezhi="",baozhuang="",num=1;
       	$.ajax({
				type: "post",
				url: App.getContextPath() + "admin/skumaterial/searchMaterialList.do",					
				async: true,
				success: function(result) {
						if(result.length>0){
							
							var arr=[];
							
							$.each(result,function(index,item){
								if(item.categoryName=='封口贴')
									fengkou+='<option value='+item.id+' price='+item.price+'>'+item.price+"("+item.materialName+')</option>';
								if(item.categoryName=='包装袋')
									baozhuang+='<option value='+item.id+' price='+item.price+'>'+item.price+"("+item.materialName+')</option>';
								if(item.categoryName=='贴纸')
									{//tiezhi+='<option value='+item.price+'>'+item.materialName+'</option>';
									arr.push(item);
									}
							});
							if(baozhuang!="")
							$("#baozhuang_select").empty().append(baozhuang).select2();
							if(fengkou!="")
							$("#fengkou_select").empty().append(fengkou).select2();
							
							$("select").change(cumBaozhuang);
						
							tiezhi="<thead>";
							for(var i=0;i<arr.length;i++){
								tiezhi+='<th>'+arr[i].materialName+"</th>";
							}
							tiezhi+="</thead><tr>"
							for(var i=0;i<arr.length;i++){
								tiezhi+='<td class="tiezhitd"><table><tr><td class="tiezhiprice" >'+arr[i].price+"*</td><td><input type='text' class='form-control' id="+arr[i].id+" maxlength='1' style='width:50px' onkeypress='return $.IsNum(event);' onblur='return $.IsNaN(this);' /></td></tr></table></td>";
							}
							tiezhi+="</tr>";
							$(".tiezhi").empty().append(tiezhi);
							
							$(".tiezhi").find("input").blur(cumBaozhuang);
							$("[name=skuprice]").blur(cumBaozhuang);
						}						
					}
				
			});
       }
       var cumBaozhuang=function(){
       	var baozhuang=$("#baozhuang_select option:selected").attr("price");
       	var fengkou=$("#fengkou_select option:selected").attr("price");
       	var skuCost=$("[name=skuprice]").val();
       	if(skuCost=="")skuCost=0;
       	var tiezhi=0;
       	$(".tiezhitd").each(function(){	        	
       		var b=$(this)[0].innerText.replace('*','');
       		var p=$(this).find("input").val();
       		if(p!=""){
       			tiezhi+=parseFloat(b)*parseInt(p);
       		}	        		
       	});
       	var total=parseFloat(baozhuang)+parseFloat(fengkou)+parseFloat(tiezhi)+parseFloat(skuCost);
       $("[name=costPrice]").html(total.toFixed(2));
       }
       
       var addTuan=function(){
    	   var id=$(this).attr("id");
    	   var promotionPrice=$(this).attr("promotionPrice");
    	   var groupAmount=$(this).attr("groupAmount");
    	   var shareRate = $(this).attr("shareRate");
    	   $("#pintuan").find("[name=id]").val(id);
    	   //$("#pintuan").find("[name=promotionPrice]").val(promotionPrice);
    	   $("#pintuan").find("[name=groupAmount]").val(groupAmount == "null" ? "" : groupAmount);
		   $("#shareRate_select").select2("val",shareRate);
	       $("#pintuan").modal("show");
    	   $("#pintuan").find(".bt-save").unbind("click").click(function(){
	       	    $(".form-group").removeClass("has-error");
	   		    promotionPrice=  $("#pintuan").find("[name=promotionPrice]").val();
	   		    groupAmount=$("#pintuan").find("[name=groupAmount]").val();
	   		    shareRate=$("#pintuan").find("[name=shareRate]").val();
	   		   /*  if(groupAmount == '' || groupAmount == 0){
	   		    	$("#pintuan").find("[name=groupAmount]").parents(".form-group").addClass("has-error");
	   		    	return false;
	   		    } */
	   		    if(shareRate == null || shareRate == ''){
	   		    	$("#pintuan").find("[name=shareRate]").parents(".form-group").addClass("has-error");
	   		    	return false;
	   		    }
	   		    $.confirm("确认修改拼团设置?",function(){
	   			    $.blockUI();
					$.ajax({
						type: "post",
						url: App.getContextPath()+"admin/group/updateGroup.do",
						async: true,
						data: {
							id: id,
							groupAmount:groupAmount,
							promotionPrice:promotionPrice, 
							shareRate: shareRate
						},
						success: function(result) {
							$.unblockUI();
							$("#pintuan").modal("hide");
							searchGroup();
						}
					});
				});
    	   });
       }
	 
	 return {
	  init:function(){
		 type=$.getUrlParam("type");
		 if(type!="Houtai")$(".houtai").hide();
	     $(".bt-save").click(saveGroup);
	     searchGroup();
	    $(".search").click(searchGroup);
	    $(".create").click(function(){
	    	$.clearInput();
	    	$("[name=costPrice]").html("0");
	    	$("[name=skuprice]").val(0);
	    	if(type=="Houtai")
	    	  {getMaterial();
	    	  $("#box-config").find(".modal-content").css("width","1000px");
	    	  }else{
	    		  $("#box-config").find(".modal-content").css("width","700px");
	    	  }
	    	
	    	$("#box-config").modal("show");
	    });
		$("#db_group_list").on("click",".bt_edit",function() {
					var tr = $(this).closest("tr");
					$.clearInput(); 
					$("#box-config").find(".form-group").removeClass("has-error");
					$("#box-config").find(".form-group").find("input[name=id]").val($(tr).find("td:eq(0)").html());
					$("#box-config").find(".form-group").find("input[name=groupName]").val($(tr).find("td:eq(1)").html());
					if(type=="Houtai"){
						getMaterial();
						$("#box-config").find(".modal-content").css("width","1000px");
						setTimeout(function(){
						    var ext=$(tr).find(".extMaterial").html();
						
							if(ext!=""){
					        	var m=JSON.parse(ext);
					        	if(typeof m.baozhuang!="undefined")
					        	 $("#baozhuang_select").select2("val",m.baozhuang.id);
					        	 $("#fengkou_select").select2("val",m.fengkou.id);
					        	 $("[name=skuprice]").val(m.skuCost);
					        	 $.each(m.tiezhi,function(index,item){				        		
					        		 $(".tiezhi").find("input[id="+item.id+"]").val(item.amount);
					        	 });
					        	}
					        	 cumBaozhuang();
					},1000);
				  }else{
					  $("#box-config").find(".modal-content").css("width","700px");
				  }
					
			        	 
					$("#box-config").modal("show");
		});
		$("#db_group_list").on("click",".bt_del",delGroup);
		$("#db_group_list").on("click",".bt_addTuan",addTuan);
		if(type=="Houtai")$(".tuan").hide();

        $("#shareRate_select").select2({placeholder: "选择分享返利"});
		
	  }
	 
	 }
	 }();
	 
	 $(function(){
	   $("#header").load("../head.html");
	   $("#sidebar").load("../menu.html");
	   App.init();
	   Group.init();
	    
	 });
		
		</script>
		<!-- /JAVASCRIPTS -->
	</body>

</html>